<template>
        <div class="resigter">

        </div>
</template>

<script>
import Input from "@com/Input/index.vue"
import {useRoute, useRouter} from "vue-router"
import { toRefs,reactive, ref, onBeforeMount, getCurrentInstance ,inject} from 'vue'
import {resigster,sendcode, me} from "../../services/api"
import { Toast } from 'vant';
import {validator} from "@uit/common"
export default {
    setup(prop,ctx){
        const router = useRouter()
        const route = useRoute()
        const otp = ref('OTP')
        const timer = ref(null)
        let loading = inject('loading', {})
        let fromdata = reactive({
            phone:'',
            password:'',
            repassword:'',
            invite_code:'',
            vertiry_code:'',
            vertiry_key: "",
        })
        const back = () => router.back()

        const sencodes = () => {
            if(otp.value!='OTP') return
            if(fromdata.phone == "") return Toast("Phone no emty!")
            sendcode({
                phone:fromdata.phone,
                area:'91',
                type:'register',
                captcha_key:'1',
                captcha_code:'1'
            }).then(res => {
                if(res.code==0){
                    fromdata.vertiry_key = res.data.key
                    Toast("Send Successful!")
                    clearInterval(timer.value)
                    timer.value = null
                    let second = 60
                    otp.value = second + "S"
                    timer.value = setInterval(() => {
                    --second
                    otp.value = second + "S"
                    if(second == 0){
                        clearInterval(timer.value)
                        timer.value = null
                        otp.value = 'OTP'
                        return
                    }
                    },1000)
                }else{
                    Toast(res.msg)
                }
            },err=>{
                Toast(err.msg)
            })

        }

        const toast = () => {

        }

        const rules = () => {
            if (fromdata.phone == "") {
                Toast("Account number Cannot be empty!");
                return false;
            }
            if (fromdata.password == "") {
                Toast("Password Cannot be empty!");
                return false;
            }
            if (fromdata.repassword == "") {
                Toast("Password again Cannot be empty!");
                return false;
            }
            if (fromdata.password != fromdata.repassword) {
                Toast("The two passwords are inconsistent!");
                return false;
            }
            if (fromdata.vertiry_code == "") {
                Toast("Verification Code be empty!");
                return false;
            }
            return true;
        }

        const sign = () => {
                if(rules()){
                    loading.value = true
                    const data = Object.assign({},{
                        phone:fromdata.phone,
                        password:fromdata.password,
                        invite_code:fromdata.invite_code,
                        verification_key:fromdata.vertiry_key,
                        verification_code:fromdata.vertiry_code    
                    })
                    resigster(data).then(res => {
                        if(res.code==0){
                            localStorage.setItem("token",res.data.access_token)
                            me().then(res1 =>{
                                if(res1.code==0){
                                    localStorage.setItem("person",JSON.stringify(res1.data))
                                    sessionStorage.removeItem("hash")
                                    loading.value = false
                                    Toast("Sign In Successful!")
                                    router.push("/")
                                }
                                else{
                                Toast(res1.msg)
                                loading.value = false
                                }
                            },err => {
                                Toast(err.msg)
                                loading.value = false
                            })
                            
                        }
                        else{
                        Toast(res.msg)
                        loading.value = false
                        }
                    }, err =>{

                        Toast(err.msg)
                        loading.value = false
                    })
                }
        }

        onBeforeMount(()=>{
            const hash = route.hash
            if(hash) sessionStorage.setItem('hash',hash.substr(1))

            if(sessionStorage.getItem('hash'))fromdata.invite_code = sessionStorage.getItem('hash')
        })

        return{
            back,
            ...toRefs(fromdata),
            sencodes,
            otp,
            sign

        }
    },
    components:{
        Input
    }
}
</script>

<style lang="scss" scoped>
    .resigter{
        width: 100%;
        height: 100vh;
        padding:32px;
        box-sizing: border-box;
        overflow: hidden;
        background: rgb(255, 255, 255);
        font-size: 36px;
        font-weight: bold;
    }
</style>